
import { useEffect, useState } from 'react'
import {fetchListAPI,ListRes,} from '@/apis/channels_api'

const useHomeList=(channelId :string)=>{


    const [listRes,setListRes] = useState<ListRes>({
        results:[],
        pre_timestamp: '' +new Date().getTime(),
      }) 
  
      //初始化数据
      useEffect( ()=>{
         const   getList = async()=>{
              try{
                  //第一次请求要写初始值
                  const res = await fetchListAPI({
                      channel_id : channelId ,
                      timestamp :'' + new Date().getTime(), //返回的时间戳
                  })
  
                  //将返回数据存入状态数据中
                   setListRes({
                    results:res.data.data.results,
                    pre_timestamp: res.data.data.pre_timestamp,
                   })
              }catch(error){
                  throw new Error('fetch List error ' + error  )
              }
         }
         getList()
      },[channelId])
  
      //下滑实现
      //开关 标记当前是否还有新数据
      //上拉加载触发的必要条件：1.hasMore=true  2.小于threshold属性
      const [hasMore, setHasMore] = useState(true)
  
      //加载下一页的函数
      const loadMore = async()=>{
        //console.log("下滑执行了")
  
        try{
          //第一次请求要写初始值
          const res = await fetchListAPI({
              channel_id : channelId ,
              timestamp :listRes.pre_timestamp, //返回的时间戳
          })
  
          //拼接新数据+ 下次请求的时间戳
           setListRes({
            results:[...listRes.results,...res.data.data.results],  //完成新老数据的拼接
            pre_timestamp: res.data.data.pre_timestamp,
           })
  
           //停止监听
           if(res.data.data.results.length===0){
              //设置成false就会停止了
              setHasMore(false)
           }
        }catch(error){
            throw new Error('fetch List error ' + error  )
        }
      }

      return {
        listRes,
        hasMore,
        loadMore,
      }
}

export {useHomeList}